<template>
    <el-dialog class="set-auth" v-dialog-drag :visible="show" width="750px" :title="title" :before-close="closeDialog"
        :append-to-body="true" :close-on-click-modal="false">
        <el-form :model="ruleForm" :rules="rules" ref="form">
            <el-tabs v-model="activeTab">
                <el-tab-pane label="查看数据范围" name="1">
                    <el-form-item label="" label-width="30px">
                        <el-radio-group class="vertical-group" v-model="ruleForm.dataPerm" @change="changeDataAuto"
                            style="width:100%;">
                            <p class="radio-wrap" v-for="(item, index) in showDataPerms" :key="index">
                                <el-radio class="radio" :label="item.valStr">
                                    {{ item.name }}
                                </el-radio>
                                <span class="dept-wrap">
                                    <select-dept
                                        v-if="ruleForm.dataPerm == item.valStr && (ruleForm.dataPerm == '1' || ruleForm.dataPerm == '3')"
                                        class="dept" v-model="ruleForm.deptIds" :label.sync="ruleForm.deptNames"
                                        :max="20" multiple>
                                    </select-dept>
                                </span>
                            </p>
                        </el-radio-group>
                    </el-form-item>
                </el-tab-pane>
                <el-tab-pane label="管理数据范围" name="2">
                    <el-form-item label="" label-width="30px">
                        <el-radio-group class="vertical-group" v-model="ruleForm.opeDataPerm" @change="changeDataAuto2"
                            style="width:100%;">
                            <p class="radio-wrap" v-for="(item, index) in opeDataPerms" :key="index">
                                <el-radio class="radio" :label="item.valStr">
                                    {{ item.name }}
                                </el-radio>
                                <span class="dept-wrap">
                                    <select-dept
                                        v-if="ruleForm.opeDataPerm == item.valStr && (ruleForm.opeDataPerm == '1' || ruleForm.opeDataPerm == '3')"
                                        class="dept" v-model="ruleForm.opeDeptIds" :label.sync="ruleForm.opeDeptNames"
                                        :max="20" multiple>
                                    </select-dept>
                                </span>
                            </p>
                        </el-radio-group>
                    </el-form-item>
                </el-tab-pane>
            </el-tabs>
        </el-form>
        <div slot="footer">
            <el-button type="primary" @click="submitFun" :loading="loading">保存</el-button>
            <el-button @click="closeDialog">取消</el-button>
        </div>
    </el-dialog>
</template>

<script>
    import selectDept from '@/components/selectDept';
    import {
        getDataAuthRange,
        updateSysDataPerm
    } from '../../service.js'
    export default {
        name: 'setAuth', // 设置数据权限
        props: {},
        components: {
            selectDept
        },
        data() {
            return {
                show: false,
                title: '设置数据权限',
                activeTab: '1',
                ruleForm: {
                    id: '', // 主键  
                    resourceCode: '', // 来源类型编号  
                    resourceId: '', // 来源ID  
                    objCode: '', // 对象编号  
                    objName: '', // 对象名称  
                    dataPerm: '', // 查看数据权限  
                    deptIds: [], // 查看权限授权机构ids  
                    deptNames: [], // 查看权限授权机构names  
                    opeDataPerm: '', // 操作数据权限范围   
                    opeDeptIds: [], // 数据操作授权机构IDS   
                    opeDeptNames: [], // 数据操作授权机构names
                    systemCode: '',
                },
                rules: {

                },
                showDataPerms: [],
                opeDataPerms: [],
                loading: false
            }
        },
        methods: {
            showDialog(row) {
                this.show = true;
                this.ruleForm.id = row.id;
                this.ruleForm.resourceCode = row.resourceCode;
                this.ruleForm.resourceId = row.resourceId;
                this.ruleForm.objCode = row.objCode;
                this.ruleForm.objName = row.objName;
                this.ruleForm.dataPerm = row.dataPerm;
                this.ruleForm.deptIds = row.deptIds ? row.deptIds.split(',') : [];
                this.ruleForm.deptNames = row.deptNames ? row.deptNames.split(',') : [];
                this.ruleForm.opeDataPerm = row.opeDataPerm;
                this.ruleForm.opeDeptIds = row.opeDeptIds ? row.opeDeptIds.split(',') : [];
                this.ruleForm.opeDeptNames = row.opeDeptNames ? row.opeDeptNames.split(',') : [];
                this.ruleForm.systemCode = row.systemCode;
                this.dataAuthRangeFun(row.objCode);
            },
            closeDialog() {
                this.show = false;
            },
            dataAuthRangeFun(objCode) {
                let params = {
                    objCode: objCode,
                }
                getDataAuthRange(params).then(res => {
                    if (res.data.code == 1000) {
                        let data = res.data.data;
                        if (data) {
                            this.showDataPerms = (data.showDataPerms || []).map(item => {
                                return {
                                    name: item.name,
                                    valStr: item.valStr
                                }
                            })
                            this.opeDataPerms = (data.opeDataPerms || []).map(item => {
                                return {
                                    name: item.name,
                                    valStr: item.valStr
                                }
                            })
                        }
                    }
                })
            },
            changeDataAuto() {
                this.ruleForm.deptId = [];
                this.ruleForm.deptName = [];
            },
            changeDataAuto2() {
                this.ruleForm.opeDeptIds = [];
                this.ruleForm.opeDeptNames = [];
            },
            submitFun() {
                this.$refs.form.validate(valid => {
                    let params = {
                        id: this.ruleForm.id, // 主键  
                        resourceCode: this.ruleForm.resourceCode, // 来源类型编号  
                        resourceId: this.ruleForm.resourceId, // 来源ID  
                        objCode: this.ruleForm.objCode, // 对象编号  
                        objName: this.ruleForm.objName, // 对象名称  
                        dataPerm: this.ruleForm.dataPerm, // 查看数据权限  
                        deptIds: this.ruleForm.deptIds.join(), // 查看权限授权机构ids  
                        deptNames: this.ruleForm.deptNames.join(), // 查看权限授权机构names  
                        opeDataPerm: this.ruleForm.opeDataPerm, // 操作数据权限范围   
                        opeDeptIds: this.ruleForm.opeDeptIds.join(), // 数据操作授权机构IDS   
                        opeDeptNames: this.ruleForm.opeDeptNames.join(), // 数据操作授权机构names
                        systemCode: this.ruleForm.systemCode,
                    }
                    this.loading = true;
                    updateSysDataPerm(params).then((res) => {
                        if (res.data.code == 1000) {
                            this.$notify({
                                title: '提示',
                                type: 'success',
                                message: '保存成功',
                            })
                            this.$emit('refresh');
                            this.closeDialog();
                        }
                        this.loading = false;
                    }).catch(error => {
                        this.loading = false;
                    })
                    this.$emit('refresh');
                })
            },
        }
    }

</script>

<style lang="scss" scoped>
    .set-auth {
        .vertical-group {
            .radio-wrap {
                line-height: 45px;

                .dept-wrap {
                    display: inline-block;
                    vertical-align: middle;
                    width: 350px;
                    line-height: 35px;
                    padding-left: 30px;
                }
            }
        }

        /deep/ {
            .el-dialog__body {
                padding: 0 20px;
            }
        }
    }

</style>
